window.addEventListener('load', function () {


  // 头部移入移除效果  
  let xian = document.querySelectorAll('.nav li');
  // console.log(xian);    首页 API 案例的移入移除
  for (let i = 0; i < xian.length; i++) {
    xian[i].addEventListener('mouseover', function () {
      xian[i].style.borderBottom = ('2px solid white')
      xian[i].addEventListener('mouseout', function () {
        xian[i].style.borderBottom = ('none')
      })
    })
  }

  // 轮播图
  new Swiper('.swiper', {
    //   direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })



  // 为开发者数据渲染
  let arr = [
    {
      imgUrl: './images/service01.svg',
      title: 'API私有化服务',
      des: '可部署本地&专有云的Web API',

    },
    {
      imgUrl: './images/service02.svg',
      title: '源码云监测',
      des: '可部署本地&专实时代码托管、威胁情报监控有云的Web API',

    },
    {
      imgUrl: './images/service03.svg',
      title: '源码有赢',
      des: '可部署本地&API开发者协作平台 API',

    },
    {
      imgUrl: './images/service04.svg',
      title: 'YuanMa API',
      des: 'API开发者协作平台&专有云的Web API',

    }
  ]
  let service = document.getElementById('service');
  let sHtml = '';

  arr.forEach(function (v) {
    sHtml += ` <div class="ml60"><img src="${v.imgUrl}" alt="">
          <h2 class="fts24 ml19 mt7">${v.title}</h2>
          <P class="fts12 ml19 mt12 mb24">${v.des}</P>
          <P class="fts12 ml19"><a class="cLan" href="">去搜索</a></P>
      </div>`
  })
  service.innerHTML = sHtml;









  // 助力巨头数据渲染
  let juTou1 = document.getElementById('juTou1');
  let arr1 = [
    {
      n1: './images/hcfc.png',
      n2: ' 河北幸福消金基于业务对三方数据的需求，需接入数百个外部数据源，涉及一百多个不同维度的数据供应商，通过代码开发对接众多接口，费时费力。通过聚合数据的三方数据管理平台，实现了完善的供应商管理、自动化测试、零代码数据源接入、数据质量管理、数据表现监控，从而保障各类信贷业务产品的风险控制正常运行，支撑公司消费贷款业务快速发展。',
      n3: '风险管理部'
    },
    {
      n1: './images/szyh.png',
      n2: ' 苏州银行在数仓建设过程中创建了新的数据模型，需要开放出去供外部系统调用。传统做法首先需要将数仓中的模型通过数据同步工具落地到目标数据库中，然后应用开发需要了解底层数据源细节，开发数据接口供调用，过程冗长复杂，难以维护，运维成本高。通过聚合数据API服务系统平台可从数据库直接生成相关的操作API，搭配前端页面即可使用，极大简化基础API 开发、维护工作。',
      n3: '苏州开发部'
    },
    {
      n1: './images/zhylian.png',
      n2: '   中国银联经过多年建设，可通过银联开放式综合支付服务平台，提供账单、订单、票券信息、行业场景等各类内容支付服务，但是传统的接口对接集成流程，存在API对接开发接入流程较复杂、技术对接沟通不便捷、产品覆盖面不足等痛点。通过聚合数据“APIMaster  慧集”的产品能力，构建新一代开放式内容交换平台，将银联传统的内容支付服务从抽象的API接口转换为具象的内容商品，同时也通过API开放底座聚合上游生态伙伴的金融服务能力，赋能上下游生态伙伴，持续推进「开放互联」的业务目标。',
      n3: '银联创中心'
    }


  ]
  function wuhan() {
    for (let i = 0; i < arr1.length; i++) {
      juTou1.innerHTML += `<div id="juTou2" class="container dn juTou2  bgFb mt100 pr">
     <img src="${arr1[i].n1}" alt="" class="pa">
    <img src="./images/help-des-icon.svg" class="pa" alt="">
     <div class="pa fts13">
        ${arr1[i].n2}
    </div>
     <p class="fts13 pa">${arr1[i].n3}</p>
     <span class="fts20 cLan pa fts40">-</span>
     </div>`;
    }
  }
  wuhan();



  // 助力巨头部分效果

  let juTou2 = document.querySelectorAll(".juTou2")
  juTou2[0].style.display = 'block';
  let index = 0;
  let timeId = null;

  function lun() {
    timeId = setInterval(function () {
      for (let i = 0; i < juTou2.length; i++) {
        juTou2[i].style.display = 'none';
      }
      juTou2[index].style.display = 'block';
      index++;
      if (index == juTou2.length) {
        index = 0;
      }
    }, 1000);
  }
  // 调用轮lun（）
  lun();
  // 清除定时器
  juTou1.addEventListener('mouseover', function () {
    window.clearInterval(timeId);
  })
  // 开启轮lun（）
  juTou1.addEventListener('mouseout', function () {
    lun();
  })






  let apple1 = document.getElementById("apple");
  console.log(apple1);
  let arr2 = [
    {
      n1: '01',
      n2: '01',
      n3: '生活服务',
    },
    {
      n1: '02',
      n2: '02',
      n3: '金融科技',
    },
    {
      n1: '03',
      n2: '03',
      n3: '交通地理',
    }, {
      n1: '04',
      n2: '04',
      n3: '充值缴费',
    }, {
      n1: '05',
      n2: '05',
      n3: '数据智能',
    }, {
      n1: '06',
      n2: '06',
      n3: '企业工商',
    }, {
      n1: '07',
      n2: '07',
      n3: '应用开发',
    }, {
      n1: '08',
      n2: '08',
      n3: '电子商务',
    }, {
      n1: 'c1',
      n2: 'c1',
      n3: '吃喝玩乐',
    }, {
      n1: 'c2',
      n2: 'c2',
      n3: '文娱视频',
    },
  ]

  let sHtml1 = '';
  arr2.forEach(function (v) {
    sHtml1 += ` <div class="box mr20 fl mb20  tac bgWit pt36"><a href=""><img src="./images/api${v.n1}-c.svg" alt=""><img
    src="./images/api${v.n2}.svg" alt="">
<p class="mt12 fts16 cHeiHui">${v.n3}</p>
</a></div>`
  })
  apple1.innerHTML = sHtml1;





  let huiJ = document.getElementById('huiji');
  let arr3 = [
    {
      n1: 'API智能接入',
      n2: '通过可视化界面配置，即可实现无代码、免开发快速接入',
    },
    {
      n1: 'API智能构建',
      n2: '多个API通过可视化的流程编排与业务逻辑重组，融合成新的API',
    }, {
      n1: 'API智能路由',
      n2: '根据入参属性进行智能分配，实现路由管理，控制API调用流向',
    }, {
      n1: '简化API开发',
      n2: '助力开发者创建API、批量测试、跟踪开发进度、自动生成文档',
    }, {
      n1: 'API开放共享',
      n2: '将核心能力以API形式对外输出，赋能到多领域、多场景的应用程序中',
    },
  ]

  arr3.forEach(function (v) {
    huiJ.innerHTML += `   <div class="fr pr bgFb pt18 pl18 mb8"><img class="fl" src="./images/master-item-icon-01.svg" alt="">
            <span class="pa fts40 cLan">|</span>
              <p class="fts18">${v.n1}</p>
             <p class="mt10 fts12 cHui">${v.n2}</p>
         </div>`
  })
















})





